<template>
  <div class="message">
    <div class="i-layout-page-header">
      <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
    </div>
    <div class="table-box" style="padding-bottom: 0">
      <Card :bordered="false" dis-hover class="">
		  <Form>
			<Row type="flex" :gutter="24">
			  <Col v-bind="grid">
				<FormItem label="项目名称:">
				  <div class="add">
					<span>联东智慧U谷2023年9月+2024年1月月结需求确认单</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="所属合同:">
				  <div class="add">
					<span>联东智慧U谷2023年9月+2024年1月月结需求确认单</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="项目编号:">
				  <div class="add">
					<span>P2304112222</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="项目经理:">
				  <div class="add">
					<span>罗伟</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="计划开始时间:">
				  <div class="add">
					<span>2024-03-01</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="计划结束时间:">
				  <div class="add">
					<span>2024-05-01</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="开始时间:">
				  <div class="add">
					<span>2024-03-01</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="结束时间:">
				  <div class="add">
					<span>2024-05-01</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col v-bind="grid">
				<FormItem label="备注:">
				  <div class="add">
					<span>asdfasdfsd</span>
				  </div>
				</FormItem>
			  </Col>
			 </Row>
			 
			 <Row type="flex" :gutter="24">
			   <Col :xs="24"> 
			 	<FormItem label="附件:">
			 	  <div class="attach">
					  <a class="file" target="_blank" >aaa.png</a>
			 	  </div>
			 	</FormItem>
			   </Col>
			  </Row>
		  </Form>
      </Card>
    </div>
    
    <!-- 缩略图配置 -->
    <div class="table-box" style="padding-top: 10px">
      <Card :bordered="false" dis-hover class="ivu-mt">
        <Row type="flex" class="mb20">
			<Col span="24">
				<span style="padding: 0px 0px 20px 0px;display: block">预估成本</span>
			</Col>
          <Col span="24">
            <Button type="primary" @click="writeWorkTime()">填写成本</Button>
          </Col>
        </Row>
        <Table
          :columns="columns"
          :data="budgetLists"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <template slot-scope="{ row, index }" slot="status">
            <!-- {{row}}{{index}} -->
            <i-switch
              v-model="row.status"
              :value="row.status"
              :true-value="1"
              :false-value="0"
              @on-change="changeSwitch(row, index)"
              size="large"
            >
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <span class="btn" @click="edit(row)">修改</span>
            <Divider type="vertical" />
            <span class="btn" @click="del(row, '删除该数据', index)">删除</span>
          </template>
        </Table>
      </Card>
    </div>
    
	<div class="table-box" style="padding-top: 10px">
	  <Card :bordered="false" dis-hover class="ivu-mt">
	    <Row type="flex" class="mb20">
			<Col span="24">
				<span style="padding: 0px 0px 20px 0px;display: block">实际成本</span>
			</Col>
	      <Col span="24">
	        <!-- <Button type="primary" @click="writeWorkTime()">填写工时</Button> -->
	      </Col>
	    </Row>
	    <Table
	      :columns="columns2"
	      :data="levelLists"
	      ref="table"
	      class="mt25"
	      :loading="loading"
	      highlight-row
	      no-userFrom-text="暂无数据"
	      no-filtered-userFrom-text="暂无筛选结果"
	    >
	      <template slot-scope="{ row, index }" slot="status">
	        <!-- {{row}}{{index}} -->
	        <i-switch
	          v-model="row.status"
	          :value="row.status"
	          :true-value="1"
	          :false-value="0"
	          @on-change="changeSwitch(row, index)"
	          size="large"
	        >
	          <span slot="open">开启</span>
	          <span slot="close">关闭</span>
	        </i-switch>
	      </template>
	      <template slot-scope="{ row, index }" slot="action">
	        <template v-if="row.domain && row.domain != row.cname">
	          <span class="btn" @click="config(row)">CNAME配置</span>
	          <Divider type="vertical" />
	        </template>
	        <span class="btn" @click="edit(row)">修改空间域名</span>
	        <Divider type="vertical" />
	        <span class="btn" @click="del(row, '删除该数据', index)">删除</span>
	      </template>
	    </Table>
	    <div class="acea-row row-right page">
	      <Page
	        :total="total"
	        :current="list.page"
	        show-elevator
	        show-total
	        @on-change="pageChange"
	        :page-size="list.limit"
	      />
	    </div>
	  </Card>
	</div>
	
	<div class="table-box" style="padding-top: 10px">
	  <Card :bordered="false" dis-hover class="ivu-mt">
	    <Row type="flex" class="mb20">
			<Col span="24">
				<span style="padding: 0px 0px 20px 0px;display: block">工时记录</span>
			</Col>
	      <Col span="24">
	        <!-- <Button type="primary" @click="writeWorkTime()">填写工时</Button> -->
	      </Col>
	    </Row>
	    <Table
	      :columns="columns3"
	      :data="workLists"
	      ref="table"
	      class="mt25"
	      :loading="loading"
	      highlight-row
	      no-userFrom-text="暂无数据"
	      no-filtered-userFrom-text="暂无筛选结果"
	    >
	      <template slot-scope="{ row, index }" slot="status">
	        <!-- {{row}}{{index}} -->
	        <i-switch
	          v-model="row.status"
	          :value="row.status"
	          :true-value="1"
	          :false-value="0"
	          @on-change="changeSwitch(row, index)"
	          size="large"
	        >
	          <span slot="open">开启</span>
	          <span slot="close">关闭</span>
	        </i-switch>
	      </template>
	      <template slot-scope="{ row, index }" slot="action">
	        <template v-if="row.domain && row.domain != row.cname">
	          <span class="btn" @click="config(row)">CNAME配置</span>
	          <Divider type="vertical" />
	        </template>
	        <span class="btn" @click="edit(row)">修改空间域名</span>
	        <Divider type="vertical" />
	        <span class="btn" @click="del(row, '删除该数据', index)">删除</span>
	      </template>
	    </Table>
	    <div class="acea-row row-right page">
	      <Page
	        :total="page.total"
	        :current="page.pageNum"
	        show-elevator
	        show-total
	        @on-change="pageChangeWork"
	        :page-size="page.pageSize"
	        @on-page-size-change="limitChangeWork"
	      />
	    </div>
	  </Card>
	</div>
	
	
	<Modal v-model="configuModal" title="CNAME配置">
      <div>
        <div class="confignv"><span class="configtit">主机记录：</span>{{ configData.domain }}</div>
        <div class="confignv"><span class="configtit">记录类型：</span>CNAME</div>
        <div class="confignv">
          <span class="configtit">记录值：</span>{{ configData.cname }}
          <span class="copy copy-data" :data-clipboard-text="configData.cname">复制</span>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>
    <menus-from
      :formValidate="formValidate"
      :titleFrom="titleFrom"
      @getList="getList"
      @selectRule="selectRule"
      ref="menusFrom"
      @clearFrom="clearFrom"
    ></menus-from>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';
import uploadPictures from '@/components/uploadPictures';
import menusFrom from './components/menusFrom';

import {
  storageConfigApi,
  addConfigApi,
  addStorageApi,
  storageListApi,
  storageSynchApi,
  storageSwitchApi,
  storageStatusApi,
  editStorageApi,
  positionInfoApi,
  positionPostApi,
  saveType,
} from '@/api/setting';
import {ListApi} from '@/api/budget';
import {ListWorksApi} from '@/api/work';
export default {
  components: { uploadPictures,menusFrom },
  data() {
    return {
      saveType: 0,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
	  
	  grid: {
	    xl: 8,
	    lg: 8,
	    md: 8,
	    sm: 24,
	    xs: 24,
	  },
      positionId: 1,
      positiontlt: '',
      formValidate: {
        thumb_big_height: '',
        thumb_big_width: '',
        thumb_mid_width: '',
        thumb_mid_height: '',
        thumb_small_height: '',
        thumb_small_width: '',
        image_watermark_status: false,
        watermark_type: 1,
        watermark_opacity: '',
        watermark_rotate: '',
        watermark_position: 1,
      },
      boxs: [
        { content: '左上', id: 1 },
        { content: '上', id: 2 },
        { content: '右上', id: 3 },
        { content: '左中', id: 4 },
        { content: '中', id: 5 },
        { content: '右中', id: 6 },
        { content: '左下', id: 7 },
        { content: '下', id: 8 },
        { content: '右下', id: 9 },
      ],
      ruleValidate: {},
      configuModal: false,
      configData: '',
      columns: [
        {
          title: '序号',
          key: 'id',
          align: 'center',
          minWidth: 80,
        },
        {
          title: '部门',
          key: 'dept_name',
          align: 'center',
          minWidth: 80,
        },
        {
          title: '人员数量',
          key: 'num',
          align: 'center',
          minWidth: 90,
        },
        {
          title: '工时',
          key: 'time',
          align: 'center',
          width: 80,
        },
        {
          title: '人工标准',
          key: 'st_price',
          align: 'center',
          width: 100,
        },
        {
          title: '人工费用',
          key: 'user_price',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '差旅费',
          key: 'travel_price',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '采购费',
          key: 'pro_price',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '商务费',
          key: 'bus_price',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '其他费',
          key: 'else_price',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '合计费用',
          key: 'total',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          align: 'center',
        },
      ],
	  
	  columns2: [
	    {
	      title: '序号',
	      key: 'id',
	      align: 'center',
	      minWidth: 80,
	    },
	    {
	      title: '部门',
	      key: 'dept',
	      align: 'center',
	      minWidth: 90,
	    },
	    {
	      title: '人员数量',
	      key: 'num',
	      align: 'center',
	      minWidth: 90,
	    },
	    {
	      title: '工时',
	      key: 'time',
	      align: 'center',
	      width: 80,
	    },
	    {
	      title: '人工标准',
	      key: 'st_price',
	      align: 'center',
	      width: 100,
	    },
	    {
	      title: '人工费用',
	      key: 'user_price',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '差旅费',
	      key: 'travel_price',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '采购费',
	      key: 'pro_price',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '商务费',
	      key: 'bus_price',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '其他费',
	      key: 'else_price',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '合计费用',
	      key: 'total',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '操作',
	      slot: 'action',
	      width: 100,
	      align: 'center',
	    },
	  ],
	  columns3: [
	    {
	      title: '序号',
	      key: 'id',
	      align: 'center',
	      width: 80,
	    },
	    {
	      title: '部门',
	      key: 'dept_name',
	      align: 'center',
	      minWidth: 90,
	    },
	    {
	      title: '岗位',
	      key: 'position_name',
	      align: 'center',
	      minWidth: 90,
	    },
	    {
	      title: '姓名',
	      key: 'user_name',
	      align: 'center',
	      width: 80,
	    },
	    {
	      title: '工时',
	      key: 'time',
	      align: 'center',
	      width: 100,
	    },
	    {
	      title: '开始时间',
	      key: 'start_time',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '结束时间',
	      key: 'end_time',
	      align: 'center',
	      minWidth: 100,
	    },
	    {
	      title: '工作内容',
	      key: 'content',
	      align: 'center',
	      minWidth: 250,
	    }
	  ],
      total: 0,
      list: {
        page: 1,
        limit: 15,
        type: '1',
      },
      budgetLists: [],
	  workLists:[],
      currentTab: '1',
      loading: false,
      addData: {
        input: '',
        select: '',
        jurisdiction: '1',
        type: '1',
      },
      confData: {
        AccessKeyId: '',
        AccessKeySecret: '',
      },
      localStorage: false,
	  titleFrom:'',
	  page: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
    };
  },
  created() {
    storageConfigApi().then((res) => {
      if (res.data.type == 1) {
        this.localStorage = true;
      }
      this.formValidate.upload_type = res.data.type;
      this.changeTab(res.data.type.toString());
    });
  },
  mounted: function () {
    this.$nextTick(function () {
      const clipboard = new ClipboardJS('.copy-data');
      clipboard.on('success', () => {
        this.$Message.success('复制成功');
      });
    });
	this.getBudget();
	this.getWorkds();
  },
  methods: {
	  //获取成本
	getBudget(){
		ListApi({'project_id':this.$route.params.id})
		  .then((res) => {
			  console.info(res)
			  this.budgetLists = res.data;
		  })
		  .catch((err) => {
		    this.$Message.error(err.msg);
		  });
	},
	  //获取成本
	getWorkds(){
		ListWorksApi({
			project_id:this.$route.params.id,
			page: this.page.pageNum,
			limit: this.page.pageSize,
		})
		  .then((res) => {
			  let data = res.data;
			  this.workLists = data.list;
			  this.page.total = data.count;
			  this.loading = false;
		  })
		  .catch((err) => {
		    this.$Message.error(err.msg);
		  });
	},
	  //填报工时
	  writeWorkTime(){
		  this.titleFrom = '填报工时';
		  this.formValidate = {};
		  this.$refs.menusFrom.modals = true;
	  },
    changeSave(type) {
      saveType(type)
        .then((res) => {
          this.$Message.success(res.msg);
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    bindbox(item) {
      this.positionId = item.id;
      this.positiontlt = item.content;
      this.formValidate.watermark_position = item.id;
    },
    handleSubmit(name) {
      if (this.formValidate.image_watermark_status) {
        this.formValidate.image_watermark_status = 1;
      } else {
        this.formValidate.image_watermark_status = 0;
      }
      if (this.formValidate.image_watermark_status) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.postMessage(this.formValidate);
          } else {
            this.$Message.error('Fail!');
          }
        });
      } else {
        this.postMessage(this.formValidate);
      }
    },
    //保存接口
    postMessage(data) {
      positionPostApi(data)
        .then((res) => {
          this.$Message.success(res.msg);
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    config(row) {
      this.configuModal = true;
      this.configData = row;
    },
    // 添加存储空间
    addStorageBtn() {
      this.$modalForm(addStorageApi(this.currentTab)).then(() => {
        this.getlist();
      });
    },
    //修改空间域名
    edit(row) {
      this.$modalForm(editStorageApi(row.id)).then(() => {
        this.getlist();
      });
    },
    changeSwitch(row, item) {
      return new Promise((resolve) => {
        this.$Modal.confirm({
          title: '切换状态',
          content: '您确认要切换使用状态吗？',
          onOk: () => {
            // resolve();
            storageStatusApi(row.id)
              .then((res) => {
                this.$Message.success(res.msg);
                this.getlist();
              })
              .catch((err) => {
                this.$Message.error(err.msg);
              });
          },
          onCancel: () => {
            this.$Message.info('已取消');
            this.getlist();
          },
        });
      });
    },
    getlist() {
      this.loading = true;
      storageListApi(this.list).then((res) => {
        this.total = res.data.count;
        this.levelLists = res.data.list;
        this.loading = false;
      });
    },
    changeTab(data) {
      this.currentTab = data;
      this.list.type = data;
      this.list.page = 1;
      if (data == 1) {
        this.getposition();
      } else {
        this.getlist();
      }
    },
    getposition() {
      let that = this;
      positionInfoApi().then((res) => {
        this.formValidate = res.data;
        if (res.data.image_watermark_status == 1) {
          that.formValidate.image_watermark_status = true;
        } else {
          that.formValidate.image_watermark_status = false;
        }
        this.positionId = res.data.watermark_position;
        for (var i = 0; i < this.boxs.length; i++) {
          if (this.boxs[i].id == res.data.watermark_position) {
            that.bindbox(this.boxs[i]);
          }
        }
      });
    },
    addSwitch(e) {
      if (e) {
        this.localStorage = 1;
      }
      storageSwitchApi({ type: this.localStorage })
        .then((res) => {
          this.$Message.success(res.msg);
          this.getlist();
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `system/config/storage/${row.id}`,
        method: 'DELETE',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getlist();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.list.page = index;
      this.getlist();
    },
	
	pageChangeWork(index) {
	  this.page.pageNum = index;
	  this.getWorkds();
	},
	limitChangeWork(limit) {
	  this.page.pageSize = limit;
	  this.getWorkds();
	},
  },
};
</script>
<style scoped lang="less">
.ivu-input-group > .ivu-input:last-child,
/deep/.ivu-input-group-append {
  background: none;
  color: #999999;
}
/deep/.ivu-input-group .ivu-input {
  border-right: 0px !important;
}
.content /deep/.ivu-form .ivu-form-item-label {
  width: 133px;
}
.topIput {
  width: 186px;
  background: #ffffff;
  border-right: 0px !important;
}
.abbreviation {
  .top {
    display: flex;
    justify-content: flex-start;
    .topBox {
      display: flex;
      .topRight {
        width: 254px;
        margin-left: 36px;
      }
      .topLeft {
        width: 94px;
        height: 94px;

        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: #000000;
        .img {
          // width: 84px;
          height: 67px;
          background: #f7fbff;
          border-radius: 4px;
          margin-bottom: 9px;
          .imgs {
            width: 70px;
            height: 51px;
            display: inline-block;
            text-align: center;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .content {
    /deep/.ivu-form-item-label {
      width: 120px;
    }
    .flex {
      display: flex;
      justify-content: flex-start;
      // width: 400px;

      .contentIput {
        width: 400px;
      }
      .conents {
        display: flex;
        .title {
          width: 30px;
          margin-top: 70px;
          margin-left: 6px;
        }
        .positionBox {
          display: flex;
          flex-wrap: wrap;
          width: 101px;
          height: 99px;
          border-right: 1px solid #dddddd;
          .box {
            width: 33px;
            height: 33px;
            // border-radius: 4px 0px 0px 0px;
            border: 1px solid #dddddd;
            cursor: pointer;
          }
          .on {
            background: rgba(24, 144, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.message /deep/ .ivu-table-header thead tr th {
  padding: 8px 16px;
}
.ivu-radio-wrapper {
  margin-right: 15px;
  font-size: 12px !important;
}
.message /deep/ .ivu-tabs-tab {
  border-radius: 0 !important;
}
.table-box {
  padding: 20px;
}
.is-table {
  display: flex;
  /* justify-content: space-around; */
  justify-content: center;
}
.btn {
  cursor: pointer;
  color: #2d8cf0;
  font-size: 10px;
}
.is-switch-close {
  background-color: #504444;
}
.is-switch {
  background-color: #eb5252;
}
.notice-list {
  background-color: #308cf5;
  margin: 0 15px;
}
.table {
  padding: 0 18px;
}
.confignv {
  margin: 10px 0px;
}
.configtit {
  display: inline-block;
  width: 60px;
  text-align: right;
}
.copy {
  padding: 3px 5px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  margin-left: 5px;
}
.copy:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}
.picBox .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.picBox .pictrue img {
  width: 100%;
  height: 100%;
}
.picBox .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}
h3 {
  margin: 5px 0 15px 0;
}
.table-box p {
  margin-bottom: 10px;
}
.save-type {
  font-size: 13px;
}
</style>
